<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Grid</title>

  <style>
    .grid {
      margin: 50px auto;
    }
  </style>
</head>

<body>
  <div class="grid"></div>

  <button id="btn">toggle</button>

  <script type="module">
    import { ImageGrid } from '../dist/index.js'

    const imageGrid = new ImageGrid(document.querySelector('.grid'), {
      size: 450,
      // rows: 4,
      // columns: 4,
      // gap: 30,
      // duration: 10,
      url: 'https://fastly.picsum.photos/id/953/600/600.jpg?hmac=R84r4tuVYG6tiI3EyTtJ0kwwQIMPW1H0831hji-pjaI',
    })

    const btn = document.querySelector('#btn')

    btn.addEventListener('click', () => {
      imageGrid.toggle()
    })
  </script>
</body>

</html>